// src\components\Header\index.js
import React from 'react';

// 从 react-redux 解构 connect 联系代理商的方法
import { connect } from 'react-redux';

// connect(mapStateToProps,mapDispatchToProps);
//   connect                    连接，联系
//   mapStateToProps            把映射 state 到 props 中      - 获取仓库状态用的
//   mapDispatchToProps         把映射 dispatch 到 props 中   - 修改仓库用的
console.log(connect);

class Header extends React.Component {
    render() {
        return (
            <header>
                <h1>页面头部访问 store 数据： {this.props.num}</h1>
            </header>
        );
    }
}

// 把映射 state 到组件 props 中
const mapStateToProps = (state) => ({
    // 从仓库的状态拿到 state.num，映射到组件的 this.props.num
    num: state.num
});

// 通过 connect 连接提供商，并映射到组件内部
const superHeader = connect(mapStateToProps)(Header);

// 返回超级头部 - 加工过的组件
export default superHeader;